﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Login.ascx.cs" Inherits="Golf.WebUI.UserControl.Login" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">
        /**********判断是否加载jquey***************/
        window.jQuery || document.write('<script src="/Script/jquery/jquery-1.4.1.min-vsdoc.js" type="text/javascript"><\/script>');
    </script>

    <link href="/Style/Base.css" rel="stylesheet" type="text/css" />
    <link href="/Css/shared-not-home.css" rel="stylesheet" type="text/css" />

    <script src="/Validator/Script/formValidator-4.1.1.js" type="text/javascript"></script>

    <script src="../Validator/Script/formValidatorRegex.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            var True_login = "0";
            //$("#btnLogin").attr({ "disabled": "disabled" });
            // $("#btnLogin").removeAttr("disabled");
            $("#btnReturning").click(function() {
                $(this).addClass("returningOpen");
                $(this).siblings("#btnNew").removeClass("newOpen");
                $("#pnlReturningCustomer").slideDown();
                $("#pnlNewCustomer").slideUp();


                $("#txtLoginEmail").val("");
                $("#txtLoginPassword").val("");
                $("#txtName").val("Golf@Golf.com");
                $("#txtEmail").val("Golf@Golf.com");
                $("#txtPassword").val("Golf@Golf.com");
                $("#txtPassword_compare").val("Golf@Golf.com");
                return false;
            });
            $("#btnNew").click(function() {
                $(this).addClass("newOpen");
                $(this).siblings("#btnReturning").removeClass("returningOpen");
                $("#pnlNewCustomer").slideDown();
                $("#pnlReturningCustomer").slideUp();

                $("#txtLoginEmail").val("Golf@Golf.com");
                $("#txtLoginPassword").val("Golf@Golf.com");

                $("#txtName").val("");
                $("#txtEmail").val("");
                $("#txtPassword").val("");
                $("#txtPassword_compare").val("");
                return false;
            });
            $("#btnClose").click(function() {
                window.location.href = 'http://<%=HttpContext.Current.Request.Url.Host %>/Index.aspx';
                $(".lightbox").show();
                $(".overlay").show();
                return false;
            });

            $("#btnLogin").click(function() {
                //alert(True_login);
                //if (True_login == "0") return false;
                var Email = $("#txtLoginEmail").val();
                var Password = $("#txtLoginPassword").val();
                $.ajax({
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded",
                    url: "/UserControl/Login.aspx?" + Math.random(),
                    data: {
                        "action": "login",
                        "email": escape(Email),
                        "pwd": escape(Password)
                    },
                    success: function(msg) {
                        msg = msg.split('|')[0];
                        if (msg == '1') {
                            alert("Login mailbox error!");
                        } else if (msg == '2') {
                            alert("Login password error!");
                        } else if (msg == '3') {
                            window.location.href = 'http://<%= HttpContext.Current.Request.Url.Host %>/Customers/Account.aspx';
                        }
                    },
                    error: function(xhr) {
                        alert(xhr.responseText);
                    }
                });
            });
            $("#btnCreate").click(function() {
                var txtName = $("#txtName").val();
                var txtEmail = $("#txtEmail").val();
                var txtPassword = $("#txtPassword").val();
                var txtPassword_compare = $("#txtPassword_compare").val();
                $.ajax({
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded",
                    url: "/UserControl/Login.aspx?" + Math.random(),
                    data: {
                        "action": "Create",
                        "name": escape(txtName),
                        "email": escape(txtEmail),
                        "pwd": escape(txtPassword),
                        "pwd_compare": escape(txtPassword_compare)
                    },
                    success: function(msg) {
                        msg = msg.split('|')[0];
                        alert(msg);
                    },
                    error: function(xhr) {
                        alert(xhr.responseText);
                    }
                });
            });
        });
    </script>

    <script type="text/javascript">
        $(function() {
            $("#btnCreate").attr({ "disabled": "disabled" }); //The button is available
            $("#txtEmail").blur(function() {
                $("#btnCreate").attr({ "disabled": "disabled" }); //The button is available
                var thisEmail = $(this).val();

                //Source if it is not registered place an order is not verified ,0 is Registered user if(UT==0){Validation}else{return}
                var MsgTip = $("#txtEmailTip span");
                if (MsgTip.attr("class") == "onCorrect" || MsgTip.attr("class") == "onFocus") {
                    MsgTip.attr("class", "onLoad");
                    MsgTip.html("The ongoing validation……………………");
                    $.ajax({
                        type: "POST",
                        contentType: "application/x-www-form-urlencoded",
                        url: "/UserControl/Login.aspx?" + Math.random(),
                        data: {
                            "action": "Valid_email",
                            "email": thisEmail
                        },
                        success: function(msg) {
                            var _msg = msg.split('|')[0];
                            if (_msg == "no") {
                                $("#txtEmailTip span").removeClass("onCorrect");
                                $("#txtEmailTip span").addClass("onError");
                                $("#txtEmailTip span").html('<span class="onError_top">Already registered Email…………</span><span class="onError_bot"></span>');
                            }
                            if (_msg == "yes") {
                                Customer_Email = thisEmail;
                                MsgTip.attr("class", "onCorrect");
                                MsgTip.html('<span class="onError_top">Input the correct, thank you</span><span class="onError_bot"></span>');
                                $("#btnCreate").removeAttr("disabled"); //The button is available
                            }
                        },
                        error: function(xhr) {
                            alert(xhr.responseText);
                        }
                    });
                }
            });
        });
    </script>

    <style type="text/css">
        .loginSignUpBox
        {
            display: none;
            position: absolute;
            top: 220px;
            width: 655px;
            z-index: 1101;
        }
        .loginSignUpBox .header
        {
            background: url("/images/loginBoxBg.png") no-repeat scroll 0 0 transparent;
            height: 62px;
            padding: 34px 36px 0;
        }
        .loginSignUpBox .header a.btn_returning
        {
            background: url("/images/btn_accountSprite.png") no-repeat scroll 0 0 transparent;
            display: block;
            float: left;
            height: 54px;
            width: 255px;
        }
        .loginSignUpBox .header a.btn_returning:hover
        {
            background-position: 0 -120px;
        }
        .loginSignUpBox .header a.returningOpen, .loginSignUpBox .header a.returningOpen:hover
        {
            background-position: 0 -60px;
        }
        .loginSignUpBox .header a.btn_new
        {
            background: url("/images/btn_accountSprite.png") no-repeat scroll right 0 transparent;
            display: block;
            float: right;
            height: 54px;
            width: 316px;
        }
        .loginSignUpBox .header a.btn_new:hover
        {
            background-position: right -120px;
        }
        .loginSignUpBox .header a.newOpen, .loginSignUpBox .header a.newOpen:hover
        {
            background-position: right -60px;
        }
        .loginSignUpBox .content
        {
            background: url("/images/loginBoxBg.png") no-repeat scroll 0 bottom transparent;
            float: left;
            padding: 0 10px 38px;
            width: 635px;
        }
        .loginSignUpBox .content a.btn_close
        {
            float: right;
            margin-right: 20px;
        }
        .loginSignUpBox .content a.btn_backClose
        {
            clear: right;
            float: right;
            margin: 14px 26px 0 0;
        }
        .loginSignUpBox .content .returningCustomer
        {
            background: url("/images/loginSignupContentBg.png") no-repeat scroll -635px 0 transparent;
            padding: 20px 0 0 22px;
            width: 100%;
        }
        .loginSignUpBox .content .returningCustomer h2
        {
            font-size: 23px;
            font-weight: normal;
            margin-bottom: 14px;
        }
        .loginSignUpBox .content .returningCustomer fieldset
        {
            padding-bottom: 20px;
            width: 95%;
        }
        .loginSignUpBox .content .returningCustomer fieldset .inputWrapper
        {
            height: 20px;
            padding: 1px 0;
        }
        .loginSignUpBox .content .returningCustomer fieldset .inputWrapper label
        {
            margin-right: 8px;
            width: 90px;
        }
        .loginSignUpBox .content .returningCustomer fieldset .inputWrapper input
        {
            border: 1px solid #969696;
            height: 18px;
            width: 172px;
        }
        .loginSignUpBox .content .returningCustomer fieldset .fieldError
        {
            height: 22px;
            padding: 0;
        }
        .loginSignUpBox .content .returningCustomer fieldset .fieldError label
        {
            line-height: 22px;
        }
        .loginSignUpBox .content .returningCustomer fieldset .fieldError input
        {
            border: 2px solid #BD3039;
            width: 172px;
        }
        .loginSignUpBox .content .returningCustomer fieldset a.forgotten
        {
            float: left;
            font-size: 10px;
            margin: 2px 0 0 100px;
            text-decoration: underline;
        }
        .loginSignUpBox .content .returningCustomer fieldset a.btn_login, input.btn_login
        {
            float: right;
        }
        .loginSignUpBox .content .returningCustomer fieldset .errorInfo
        {
            background: url("/images/loginError.png") no-repeat scroll 0 0 transparent;
            color: #FFFFFF;
            float: left;
            font-size: 11px;
            height: 27px;
            margin-bottom: 10px;
            padding: 10px 0 0 54px;
            width: 222px;
        }
        .loginSignUpBox .content .newCustomer
        {
            background: url("/images/loginSignupContentBg.png") no-repeat scroll 0 0 transparent;
            padding: 16px 0 0;
        }
        .loginSignUpBox .content .newCustomer .createAccount
        {
            border-bottom: 1px solid #C2C1C2;
            height: 154px;
            margin: 0 auto;
            width: 587px;
        }
        .loginSignUpBox .content .newCustomer .createAccount h3
        {
            float: left;
        }
        .loginSignUpBox .content .newCustomer .createAccount ul
        {
            clear: left;
            float: left;
            margin: 10px 0 0 76px;
        }
        .loginSignUpBox .content .newCustomer .createAccount ul li
        {
            background: url("/images/bulletGreenDot.gif") no-repeat scroll 0 center transparent;
            font-size: 11px;
            padding-left: 14px;
            white-space: nowrap;
        }
        .loginSignUpBox .content .newCustomer .createAccount fieldset
        {
            float: right;
            width: 486px;
        }
        .loginSignUpBox .content .newCustomer .createAccount fieldset .inputWrapper
        {
            height: 20px;
            padding: 1px 0;
            width: 513px;
        }
        .loginSignUpBox .content .newCustomer .createAccount fieldset .inputWrapper label
        {
            margin-right: 4px;
            width: 115px;
        }
        .loginSignUpBox .content .newCustomer .createAccount fieldset .inputWrapper input
        {
            border: 1px solid #969696;
            height: 18px;
            width: 170px;
        }
        .loginSignUpBox .content .newCustomer .createAccount fieldset .fieldError
        {
            height: 22px;
            padding: 0;
        }
        .loginSignUpBox .content .newCustomer .createAccount fieldset .fieldError label
        {
            line-height: 22px;
        }
        .loginSignUpBox .content .newCustomer .createAccount fieldset .fieldError input
        {
            border: 2px solid #BD3039;
        }
        .loginSignUpBox .content .newCustomer .caFooter
        {
            border-top: 1px solid #FFFFFF;
            margin: 0 auto;
            width: 583px;
        }
        .loginSignUpBox .content .newCustomer .caFooter .newsletterSignup
        {
            float: left;
            margin: 0 auto;
            overflow: auto;
            padding: 14px 0 24px;
            width: 280px;
        }
        .loginSignUpBox .content .newCustomer h3
        {
            font-size: 1.1em;
            font-weight: normal;
        }
        .loginSignUpBox .content .newCustomer .caFooter .newsletterSignup p
        {
            font-size: 11px;
            margin: 6px 0 0;
        }
        .loginSignUpBox .content .newCustomer .caFooter .newsletterSignup fieldset
        {
            float: left;
            margin-top: 6px;
            padding-left: 20px;
        }
        .loginSignUpBox .content .newCustomer .caFooter p.passInfo
        {
            float: right;
            font-size: 11px;
            margin: 20px 0;
            width: 260px;
        }
        .loginSignUpBox .content .newCustomer a.btn_createAccount
        {
            clear: right;
            float: right;
        }
        .loginSignUpBox .content .forgottenPassword
        {
            background: url("/images/loginSignupContentBg.jpg") no-repeat scroll -1270px 0 transparent;
            padding: 20px 0 0 122px;
            width: 513px;
        }
        .loginSignUpBox .content .forgottenPassword h2
        {
            font-size: 23px;
            font-weight: normal;
            margin-bottom: 14px;
        }
        .loginSignUpBox .content .forgottenPassword .forgottenPassCont
        {
            background: url("/images/forgottenPassCont.png") no-repeat scroll 0 0 transparent;
            padding: 10px 17px 7px;
            width: 355px;
        }
        .loginSignUpBox .content .forgottenPassword .forgottenPassCont p
        {
            font-size: 11px;
        }
        .loginSignUpBox .content .forgottenPassword .forgottenPassCont fieldset label
        {
            float: left;
            line-height: 20px;
            text-align: right;
            width: 84px;
        }
        .loginSignUpBox .content .forgottenPassword .forgottenPassCont fieldset label em
        {
            color: #B30B12;
        }
        .loginSignUpBox .content .forgottenPassword .forgottenPassCont fieldset input
        {
            float: left;
            height: 14px;
            margin: 0 4px 0 6px;
            width: 176px;
        }
        .loginSignUpBox .content .forgottenPassword .forgottenPassCont fieldset a.btn_submit
        {
            float: left;
        }
        .loginSignUpBox .content .forgottenPassword .forgottenPassCont fieldset p.req
        {
            clear: left;
            color: #B30B12;
            float: left;
            font-size: 10px;
            margin: 6px 0 0 90px;
        }
        .loginSignUpBox .content .forgottenPassword .forgottenPassCont fieldset .fieldError
        {
            float: none;
        }
        .loginSignUpBox .content .forgottenPassword .forgottenPassCont fieldset .fieldError label
        {
            margin: 2px 0;
        }
        .loginSignUpBox .content .forgottenPassword .forgottenPassCont .largeThanks
        {
            color: #89BC05;
            font-size: 21px;
            font-weight: bold;
        }
        .loginSignUpBox .content .forgottenPassword .forgottenPassContBottom
        {
            background: url("/images/forgottenPassCont.png") no-repeat scroll 0 bottom transparent;
            height: 4px;
            margin-bottom: 6px;
            width: 389px;
        }
        .orderErrorBox
        {
            display: none;
            position: absolute;
            top: 220px;
            width: 655px;
            z-index: 1101;
        }
        div[id$="Tip"] div, .onShow
        {
            border-radius: .5em;
        }
        div[id$="Tip"]
        {
            height: 20px;
            line-height: 14px;
            font-size: 11px;
            width: 230px;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            /*****************************returningCustomer*******************SolidBox******/
            jQuery.formValidator.initConfig({ formID: "form1", theme: 'ArrowSolidBox', submitOnce: true,
                onError: function(msg, obj, errorlist) {
                    alert(msg);
                },
                onSuccess: function() {
                }
            });
            jQuery("#txtLoginPassword").formValidator({
                onShow: "Please enter the LoginPassword！",
                onFocus: "The LoginPassword field cannot be empty",
                onCorrect: "Congratulations to you, lose on the!"
            }).inputValidator({
                min: 1,
                onError: "The LoginPassword field cannot be empty"
            });
            $("#txtLoginEmail").formValidator({
                onShow: "Please enter your email",
                onFocus: "Mailbox at least 6 characters, a maximum of 100 characters",
                onCorrect: "Congratulations to you, lose on the!",
                defaultValue: "@"
            }).inputValidator({
                min: 6,
                max: 100,
                onError: "You enter the email length illegal, please confirm"
            }).regexValidator({
                regExp: "^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",
                onError: "You enter the mailbox format is not correct"
            });
            /*****************************newCustomer*************************/

            jQuery("#txtName").formValidator({
                onShow: "Please enter the name！",
                onFocus: "The tname field cannot be empty",
                onCorrect: "Congratulations to you, lose on the!"
            }).inputValidator({
                min: 1,
                defaultValue: "********",
                onError: "The name field cannot be empty"
            });
            $("#txtEmail").formValidator({
                onShow: "Please enter your email",
                onFocus: "Mailbox at least 6 characters, a maximum of 100 characters",
                onCorrect: "Congratulations to you, lose on the!",
                defaultValue: "Golf@Golf.com"
            }).inputValidator({
                min: 6,
                max: 100,
                defaultValue: "********",
                onError: "You enter the email length illegal, please confirm"
            }).regexValidator({
                regExp: "^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",
                onError: "You enter the mailbox format is not correct"
            });
            $("#txtPassword").formValidator({ onShow: "Please enter your password", onFocus: "At least 1length", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 1, empty: { leftEmpty: false, rightEmpty: false, emptyError: "The password cannot have an empty symbols on both sides" }, defaultValue: "********", onError: "Password should not be empty, please confirm"
            });
            $("#txtPassword_compare").formValidator({ onShow: "Enter password again", onFocus: "At least 1length", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 1, empty: { leftEmpty: false, rightEmpty: false, emptyError: "The password cannot have an empty symbols on both sides" }, defaultValue: "********", onError: "Password should not be empty, please confirm"
            }).compareValidator({ desID: "txtPassword", operateor: "=", onError: "The two passwords are inconsistent, please confirm" });
        });
    </script>

</head>
<body>
    <form id="form1">
    <div class="loginSignUpBox modal lightbox">
        <div id="upLogin">
            <div class="header">
                <a id="btnReturning" class="btn_returning returningOpen" href="#"></a><a id="btnNew"
                    class="btn_new" href="#"></a>
            </div>
            <div class="content">
                <!-- RETURNING CUSTOMER -->
                <div id="pnlReturningCustomer" class="returningCustomer">
                    <h2>
                        Log in to your account</h2>
                    <fieldset>
                        <div id="con_txtEmail" class="inputWrapper " style="height: 35px;">
                            <label for="txtLoginEmail" style="float: left;">
                                Email Address:</label>
                            <input name="txtLoginEmail" type="text" id="txtLoginEmail" style="float: left;">
                            <div id="txtLoginEmailTip" style="float: right; width: 303px;">
                            </div>
                        </div>
                        <div id="con_txtLoginPassword" class="inputWrapper" style="height: 35px;">
                            <label for="txtLoginPassword" style="float: left;">
                                Password:</label>
                            <input name="txtLoginPassword" type="password" id="txtLoginPassword" style="float: left;">
                            <div id="txtLoginPasswordTip" style="float: right; width: 303px;">
                            </div>
                        </div>
                        <a id="btnForgot" class="forgotten" href="#">Forgotten Password?</a>
                        <%-- <input id="btnLogin" type="button" value="button" class="btn_login" style="border-width: 0px;
                            cursor: pointer; height: 20px;" />--%>
                        <%--  <input type="image" name="btnLogin" id="btnLogin" title="Anmelden" class="btn_login"
                            src="" style="border-width: 0px;">--%>
                        <input id="btnLogin" type="button" value="button" class="btn_login" style="border-width: 0px;
                            cursor: pointer; height: 20px;" />
                    </fieldset>
                </div>
                <div id="pnlNewCustomer" class="newCustomer" style="display: none;">
                    <div class="createAccount">
                        <h3 style="font-weight: bold;">
                            Create an account and benefit from:</h3>
                        <br />
                        <ul style="padding-left: 80px; margin: 0px; width: 400px;">
                            <li>Save your delivery &amp; billing address</li>
                            <li>Check your order history</li>
                        </ul>
                        <div>
                        </div>
                        <fieldset style="clear: left;">
                            <div id="con_txtName" class="inputWrapper">
                                <label for="txtName" style="float: left; text-align: right;">
                                    Name*:</label>
                                <input name="txtName" type="text" id="txtName" style="float: left;" value="123456">
                                <div id="txtNameTip" style="float: right; width: 200px;">
                                </div>
                            </div>
                            <div id="con_txtEmail" class="inputWrapper">
                                <label for="txtEmail" style="float: left; text-align: right;">
                                    Email Address*:</label>
                                <input name="txtEmail" type="text" id="txtEmail" style="float: left;" value="123456">
                                <div id="txtEmailTip" style="float: right; width: 200px;">
                                </div>
                            </div>
                            <div id="con_txtPassword" class="inputWrapper">
                                <label for="txtPassword" style="float: left; text-align: right;">
                                    Passworkd*:</label>
                                <input name="txtPassword" type="password" id="txtPassword" style="float: left;" value="123456">
                                <div id="txtPasswordTip" style="float: right; width: 200px;">
                                </div>
                            </div>
                            <div id="con_txtPassword_compare" class="inputWrapper">
                                <label for="txtPassword_compare" style="float: left; text-align: right;">
                                    Confirm Password*:</label>
                                <input name="txtPassword_compare" type="password" id="txtPassword_compare" style="float: left;"
                                    value="123456">
                                <div id="txtPassword_compareTip" style="float: right; width: 200px;">
                                </div>
                            </div>
                            <div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="caFooter">
                        <p class="passInfo">
                            <a id="btnCreate" title="Create Account" class="btn_createAccount" href="#" style="height: 15px;">
                                &nbsp;</a>
                        </p>
                    </div>
                </div>
                <!-- NEW CUSTOMER -->
                <!-- FORGOTTEN PASSWORD -->
                <a id="btnClose" class="btn_backClose btn_close">Close</a>
                <div style="position: absolute; bottom: 20px; left: 14px;">
                    <h3 style="padding-left: 30px;">
                        Checkout Without Account<a href="http://<%= HttpContext.Current.Request.Url.Host %>/Checkout.aspx?action=without"
                            style="padding-left: 20px; text-decoration: underline;">Go To Checkout </a>
                    </h3>
                    <br />
                    <span style="font-size: 11px; padding-left: 10px;">For a faster checkout experience,
                        we offer the option to checkout without creating an account. Continue</span>
                </div>
            </div>
        </div>
    </div>
    <div class="overlay">
        &nbsp;</div>
    </form>
</body>
</html>

<script src="/Script/MAD.js" type="text/javascript"></script>

<script type="text/javascript">
    function showLightBox(id) {
        return MAD.lightBox.show(id);
    }
    MAD.lightBox.init();     
</script>

